<template>
  <div class="PeopleAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="手机号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset: 1 }">
              <a-input placeholder="请输入手机号" v-decorator="['phone']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset: 1 }">
              <a-input placeholder="请输入姓名/昵称" v-decorator="['name']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="角色" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset: 1 }">
              <a-select style="width:100%" v-decorator="['role']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in authorityList"
                  :key="item.authorityId"
                  :value="item.authorityId"
                >{{item.designation}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset: 1 }">
              <a-select style="width:100%" v-decorator="['status']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">启用</a-select-option>
                <a-select-option :value="0">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="15" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="search($event)">查询</a-button>
            <a-button @click="handleReset()" style="margin-left:2%">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-button type="primary" icon="plus" @click="showModal()">新建</a-button>
      <a-table
        style="margin-top:2%"
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.managerId"
      >
        <template slot="status" slot-scope="text,record">
          <a-switch checkedChildren="开" unCheckedChildren="关" :checked="record.status" />
        </template>
        <template slot="operate" slot-scope="text,record">
          <span class="blue" @click="showEdit(text,record)">编辑</span>
          <span class="red" @click="showDeleteConfirm(text,record)">删除</span>
        </template>
      </a-table>
    </a-card>
    <a-modal
      title="编辑人员信息"
      :visible="visibleEdit"
      @ok="handleEditOk"
      @cancel="handleEditCancel"
      v-model="visibleEdit"
    >
      <template slot="footer">
        <a-button key="back" @click="handleEditCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleEditOk">确定</a-button>
      </template>
      <a-form :form="form">
        <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input style="width: 100%" placeholder="请输入" v-decorator="['nameEdit']" />
        </a-form-item>
        <a-form-item label="用户名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input style="width: 100%" placeholder="请输入" v-decorator="['userNameEdit']" />
        </a-form-item>
        <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            type="password"
            style="width: 100%"
            placeholder="请输入"
            v-decorator="['passwordEdit']"
          />
        </a-form-item>
        <a-form-item label="手机号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input style="width: 100%" placeholder="请输入" v-decorator="['phoneEdit']" />
        </a-form-item>
        <a-form-item label="角色" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select style="width: 100%" v-decorator="['roleEdit']" placeholder="超级管理员">
            <a-select-option
              v-for="item in authorityList"
              :key="item.authorityId"
              :value="item.authorityId"
            >{{item.designation}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input style="width: 100%" placeholder="请输入" v-decorator="['noteEdit']" />
        </a-form-item>
        <a-form-item label="启用状态" :label-col="{ span: 5 }">
          <a-switch
            v-decorator="['statusEdit', { valuePropName: 'checked',initialValue:true }]"
            checkedChildren="开"
            unCheckedChildren="关"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="新增人员"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
      <a-form :form="form">
        <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input placeholder="请输入" v-decorator="['nameAdd']" />
        </a-form-item>
        <a-form-item label="用户名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input placeholder="请输入" v-decorator="['userNameAdd']" />
        </a-form-item>
        <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input type="password" placeholder="请输入" v-decorator="['passwordAdd']" />
        </a-form-item>
        <a-form-item label="手机号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input placeholder="请输入" v-decorator="['phoneAdd']" />
        </a-form-item>
        <a-form-item label="角色" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select style="width: 100%" v-decorator="['roleAdd']" placeholder="请选择">
            <a-select-option
              v-for="item in authorityList"
              :key="item.authorityId"
              :value="item.authorityId"
            >{{item.designation}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input placeholder="请输入" v-decorator="['noteAdd']" />
        </a-form-item>
        <a-form-item label="启用状态" :label-col="{ span: 5 }">
          <a-switch
            v-decorator="['statusAdd',{ valuePropName: 'checked',initialValue:true }]"
            checkedChildren="开"
            unCheckedChildren="关"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
    scopedSlots: { customRender: "userName" },
    align: "center"
  },
  {
    title: "姓名",
    dataIndex: "nickname",
    scopedSlots: { customRender: "userName" },
    align: "center"
  },
  {
    title: "手机号",
    dataIndex: "cellphone",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "用户角色",
    dataIndex: "authorityName",
    scopedSlots: { customRender: "userName" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "最近登陆时间",
    dataIndex: "loginTime",
    scopedSlots: { customRender: "latelyTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operate" },
    align: "center"
  }
];
const data = [
  {
    key: "1",
    userName: "1234",
    name: "口水娃玉米味烤肠袋装50g",
    phone: "",
    userRole: "1",
    latelyTime: ""
  }
];
export default {
  name: "PeopleAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      columns,
      data: [],
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      visibleEdit: false,
      authorityList: []
    };
  },
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.search();
    },
    showModal() {
      this.visible = true;
      this.authoritySelect();
    },
    handleOk(e) {
      var values = this.form.getFieldsValue();
      if (!values.nameAdd) {
        this.$message.warning("姓名不能为空");
      } else if (!values.userNameAdd) {
        this.$message.warning("用户名不能为空");
      } else if (!values.passwordAdd) {
        this.$message.warning("密码不能为空");
      } else if (!values.phoneAdd) {
        this.$message.warning("手机号不能为空");
      } else if (!values.roleAdd) {
        this.$message.warning("角色不能为空");
      } else if (!values.noteAdd) {
        this.$message.warning("备注不能为空");
      } else if (!values.statusAdd) {
        this.$message.warning("开关不能为空");
      } else {
        this.visible = false;
        this.addManager();
      }
    },
    handleCancel(e) {
      this.visible = false;
    },
    showEdit(text, record) {
      this.visibleEdit = true;
      this.managerId = record.managerId;
      this.authoritySelect();
      this.detailManager();
    },
    handleEditOk(e) {
      this.visibleEdit = false;
      this.editManager();
    },
    handleEditCancel(e) {
      this.visibleEdit = false;
    },
    showDeleteConfirm(text, record) {
      var that = this;
      this.managerIds = record.managerId;
      this.$confirm({
        title: "确认要删除此人员吗？",
        content: "删除此人员后，此人员无法登录",
        okText: "确定",
        cancelText: "取消",
        iconType: "close-circle",
        onOk() {
          that.deleteManager(that.managerIds);
        },
        onCancel() {}
      });
    },

    // 返回管理人员列表数据
    search($event) {
      if ($event) {
        this.pagination.current = 1;
      }
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/manager/search", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          authorityId: values.role,
          cellphone: values.phone,
          nickname: values.name,
          sortType: 2,
          status: values.status
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 返回所有角色列表数据，用于下拉框
    authoritySelect() {
      this.axios
        .post(this.baseUrl + "/authority/list", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.authorityList = response.data.data;
        });
    },

    // 新增管理人员
    addManager() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/manager/add", {
          loginToken: this.$store.state.loginToken,
          authorityId: values.roleAdd,
          cellphone: values.phoneAdd,
          nickname: values.nameAdd,
          password: values.passwordAdd,
          remark: values.noteAdd,
          status: values.statusAdd,
          username: values.userNameAdd
        })
        .then(response => {
          if (response.data.code == 0) {
            this.$message.info("新增成功");
            this.search();
          }
        });
    },

    // 删除管理人员
    deleteManager(managerIds) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/manager/delete", {
          loginToken: this.$store.state.loginToken,
          managerIds: [managerIds]
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$message.info("删除成功");
            this.search();
          }
          if (response.data.code == -1) {
            this.$message.info(response.data.msg);
          }
        });
    },

    // 编辑管理人员，不需要更新的字段用null
    editManager() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/manager/edit", {
          loginToken: this.$store.state.loginToken,
          managerId: this.managerId,
          authorityId: values.roleEdit,
          cellphone: values.phoneEdit,
          nickname: values.nameEdit,
          password: values.passwordEdit,
          remark: values.noteEdit,
          status: values.statusEdit,
          username: values.userNameEdit
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$message.info("编辑成功");
            this.search();
          }
        });
    },

    // 人员详情
    detailManager() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/manager/detail", {
          loginToken: this.$store.state.loginToken,
          managerId: this.managerId
        })
        .then(response => {
          console.log(response);
          // this.detailInfo = response.data.data;
          this.form.setFieldsValue({
            nameEdit: response.data.data.nickname,
            userNameEdit: response.data.data.username,
            passwordEdit: response.data.data.password,
            phoneEdit: response.data.data.cellphone,
            roleEdit: response.data.data.authorityId,
            noteEdit: response.data.data.remark,
            statusEdit: response.data.data.status
          });
        });
    }
  },
  created() {
    this.authoritySelect();
    this.search();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.PeopleAdmin {
  width: 100%;
}

.edit {
  color: rgb(0, 85, 255);
}
</style>
